<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/10
  Time: 12:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%%>
<html>
<head>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <link rel="stylesheet" type="text/css" href="css/base.css">
        <link rel="stylesheet" type="text/css" href="css/register.css">
        <script src="js/jquery.min.js"></script>
        <script>
            //检验用户名，长度为4-10位
            function CheckUsername(){
                var username = $("#username").val();
                var reg = /^\w{4,10}$/;
                var flag = reg.test(username);
                if(flag){
                    $("#username").css("border","");
                    $("#usererr").hide();
                }else{
                    $("#username").css("border","1px solid red");
                    $("#usererr").show();
                }
                return flag;
            }
            //检验密码，长度为6-20位
            function CheckPwd(){
                var password = $("#password").val();
                var reg = /^\w{6,20}$/;
                var flag = reg.test(password);
                if(flag){
                    $("#password").css("border","");
                    $("#pwd1err").hide();
                }else{
                    $("#password").css("border","1px solid red");
                    $("#pwd1err").show();
                }
                return flag;
            }
            //检验两次输入的密码是否一致
            function CheckPwd12() {
                var password = $("#password").val();
                var pwd2 = $("#pwd2").val();
                if (password!=pwd2){
                    $("#pwderr").show();
                    return false;
                }else{
                    $("#pwderr").hide();
                    return true;
                }

            }
            //检验邮箱
            function CheckEmail(){
                var email = $("#email").val();
                var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var flag = reg.test(email);
                if(flag){
                    $("#email").css("border","");
                    $("#emailerr").hide();
                }else{
                    $("#email").css("border","1px solid red");
                    $("#emailerr").show();
                }
                return flag;
            }

            $(function(){
                $("#registerForm").submit(function(){
                    if (CheckUsername()&&CheckPwd()&&CheckEmail()&&CheckPwd12){
                        $.post("user/regist",$(this).serialize(),function (data) {
                            if(data.flag){
                                //location.href="register_ok.html";
                                location.href="/regist_ok.jsp"
                            }else{
                                $("#errorMsg").html(data.errorMsg);
                            }
                        });
                    }
                    return false;  //不让页面跳转
                });

                $("#username").blur(CheckUsername);
                $("#password").blur(CheckPwd);
                $("#email").blur(CheckEmail);
                $("#pwd2").blur(CheckPwd12);
            })
        </script>
    </head>
</head>
<body>
<div class="w">
    <div class="header">
        <div class="logo">
            <a href="/index.jsp"><img src="images/logo.png" alt=""></a>
        </div>
    </div>
    <div class="content">
        <h3>注册新用户<em>我有账号去<a href="/login.jsp">登陆</a></em></h3>
        <div class="login">
            <div  id="errorMsg" style="text-align: center;color: red"></div>
            <form id="registerForm" method="post" action="">
                <ul>
                    <li>
                        <label for="username">用户名:</label>
                        <input type="text" class="inp" id="username" name="username">
                        <span class="error" id="usererr" style="display: none"><i class="error_icon"></i>用户名格式不正确,提示：4-10位字符</span>
                    </li>
                    <li>
                        <label for="password">登录密码:</label>
                        <input class="inp" id="password" name="password" type="password">
                        <span class="error" id="pwd1err" style="display: none"><i class="error_icon"></i>密码格式不正确,提示：6-20位字符</span>
                        <!--							<span class="success"><i class="success_icon"></i>恭喜你输入正确</span>-->
                    </li>
                    <li>
                        <label for="pwd2">确认密码:</label>
                        <input class="inp" id="pwd2" type="password">
                        <span class="error" id="pwderr" style="display: none"><i class="error_icon"></i>两次输入密码不一致</span>
                    </li>
                    <li>
                        <label for="password">Email:</label>
                        <input type="text" class="inp" id="email" name="email">
                        <span class="error" id="emailerr" style="display: none"><i class="error_icon"></i>邮箱格式不正确,请重新输入</span>
                    </li>

                    <li>
                        <label for="check">验证码:</label>
                        <input type="text" style="width: 100px;" class="inp" id="check" name="check">
                        <img src="/checkCode" style="margin-left: 10px;margin-top: -2px" width="100px" height="36px" alt="" onclick="changeCheckCode(this)">
                        <script type="text/javascript">
                            //图片点击事件
                            function changeCheckCode(img) {
                                img.src="/checkCode?"+new Date().getTime();
                            }
                        </script>
                    </li>
                    <li class="agree">
                        <input type="checkbox">	同意协议注册<a href="">《用户注册协议》</a>
                    </li>
                    <li><input type="submit" value="完成注册" class="over"></li>
                </ul>
            </form>
        </div>
    </div>
</div>
<footer>
    <div class="footer w">
        <p class="links">关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  芝麻优购  |  友情链接  |  销售联盟  |  芝麻优购社区  |  芝麻优购公益  |  English Site  |  Contact U</p>
        <p class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: 1649743146@qq.com<br>
            京ICP备08001421号京公网安备110108007702
        </p>
    </div>
</footer>
</body>
</html>
